<template>
  <div>
    <el-table max-height="328" :data="tabledata" style="width: 100%"  >
              <el-table-column prop="number" label="试题编号" width="130" >
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="100">
              </el-table-column>
              <el-table-column prop="catalog" label="目录"> </el-table-column>
              <el-table-column prop="questionType" label="题型" width="100">
                <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column prop="question" label="题干" width="300">
                <template slot-scope="scope">
                {{   clearHTMLTag(scope.row.question)}}
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间" width="150">
                <template slot-scope="scope">
                {{   fromTime(scope.row.addDate)}}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度">
                <template slot-scope="scope">
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="130"> </el-table-column>
              <el-table-column prop="chkState" label="审核状态">
                <template slot-scope="scope">
                <span v-if="scope.row.chkState === 0">待审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>已审核</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100"> </el-table-column>
              <el-table-column prop="publishState" label="发布状态" width="100">
                <template slot-scope="scope">
                <span v-if="scope.row.chkState === 1">待发布</span>
                <span v-else-if="scope.row.chkState === 2  && scope.row.publishState === 0 ">已下架</span>
                <span v-else-if="scope.row.chkState ===  3  && scope.row.publishState ===1 ">已上架</span>
                <span v-else>已发布</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" style=""  prop="address" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
                  <el-button type="text" size="small" :disabled="scope.row.chkState !== 0" @click="closeSh(scope.row.id)">审核</el-button>
                  <el-button type="text" size="small" :disabled="scope.row.publishState === 1"  @click="$router.push('/questions/new?id='+scope.row.id)">修改</el-button>
                  <el-button type="text"  size="small" v-if="scope.row.publishState === 0" @click="open(1,scope.row.id)" >上架</el-button>
                  <el-button type="text" size="small" v-else-if="scope.row.publishState === 1" @click="open(0,scope.row.id)">下架</el-button>
                  <el-button type="text" size="small" :disabled="scope.row.publishState === 1" @click="removeDelOpen(scope.row.id)" >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 预览弹层 -->
            <el-dialog
              title="题目预览"
              :visible="dialogVisible"
              width="50%"
              :before-close="handleClose">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6">
                  【题型】: <span  v-if="newTable.questionType === '1'">单选</span>
                <span v-else-if="newTable.questionType === '2'">多选</span>
                <span v-else>简答</span>
                </el-col>
                <el-col :span="6">
                  <span>【编号】:{{newTable.id }}</span>
                </el-col>
                <el-col :span="6">
                  【难度】 <span v-if="newTable.difficulty === '1'">简单</span>
                <span v-else-if="newTable.difficulty === '2'">一般</span>
                <span v-else>困难</span>
                </el-col>
                <el-col :span="6">
                  <span>【标签】:{{newTable.tags }}</span>
                </el-col>
              </el-row>
              <el-row  class="row-bg" >
                <el-col :span="6">
                  <span>【学科】:{{dialogItemObj.subjectName }}</span>
                </el-col>
                <el-col :span="6">
                  <span>【目录】:{{dialogItemObj.directoryName }}</span>
                </el-col>
                <el-col :span="6">
                  <span>【方向】:{{dialogItemObj.direction }}</span>
                </el-col>
              </el-row>
              <hr>
              <span>【题干】:</span>
              <p style="color: blue;">{{ clearHTMLTag(dialogItemObj.question) }}</p>
              <p v-if="dialogItemObj.questionType !== '3'">{{questionTypeList[dialogItemObj.questionType-1]?.label}}题 选项:(以下选中的选项为正确答案)</p>
              <div v-if="dialogItemObj.questionType ==='1'">
                <el-row
                v-for="item in dialogItemObj.options"
                :key="item.id"
                class="row-bg" >
                <el-col :span="6">
                  <el-radio-group :value="radio">
                    <el-radio
                      :label="item.isRight"
                    >{{item.title}}</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              </div>
              <div v-else-if="dialogItemObj.questionType ==='2'">
                <el-row
                v-for="item in dialogItemObj.options"
                :key="item.id"
                :span="6"
                class="row-bg" >
                <el-col
                >
                  <el-checkbox
                  :value="item.isRight === 1"
                  >{{ item.title}}</el-checkbox>
                  <!-- 方案二 -->
                  <!-- <el-checkbox
                  onClick="javascript:return false"
                  v-model="item.isRight"
                  :true-label="1"
                  :false-label="0"
                  >{{ item.title}}</el-checkbox> -->
                </el-col>
              </el-row>

              </div>
              <hr>
              <span>【参考答案】:</span>
              <el-button @click="isShow = !isShow" type="danger" v-model="isShow">视频答案预览</el-button>
              <div v-if="isShow">
                <video width="320" height="240" controls autoplay>
                <source :src="dialogItemObj.videoURL" type="video/mp4">
                您的浏览器不支持 video 属性。
              </video>
              </div>
              <hr>
              <el-row  class="row-bg" style="margin-top: 20px;" >
                <el-col >
                  <span>【答案解析】:{{ clearHTMLTag(dialogItemObj.answer) }}</span>
                </el-col>
              </el-row>
              <hr>
              <span>【题目备注】:{{dialogItemObj.remarks}}</span>
              <span slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
              </span>
            </el-dialog>
            <!-- 审核弹层 -->
            <el-dialog
              title="题目审核"
              :visible="ShdialogVisible"
              width="30%"
              :before-close="handleClose1">
                <el-radio v-model="value" :label="1">通过</el-radio>
                <el-radio v-model="value" :label="2">拒绝</el-radio>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入审核意见"
                v-model="textarea"
                style="margin-top:30px ;"
                >
              </el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="ShdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </span>
            </el-dialog>
  </div>
</template>

<script>
import { detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js'
export default {
  props: {
    questionTypeList: { // 试题类型数据
      type: Array,
      default: () => []
    },
    tabledata: { // 列表数据
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dialogVisible: false, // 预览弹层状态
      isShow: false, // 视频显示状态
      dialogItemObj: {}, // 预览弹层数据
      newTable: {}, // 预览id获取的数据
      radio: 1, // 预览弹层单选框默认值
      ShdialogVisible: false, // 审核弹层状态
      ShId: 0, // 审核id
      value: 1, // 审核弹层单选框默认值
      textarea: '', // 审核弹层文本域
      newTableData: []
    }
  },
  methods: {
    // 预览数据
    async handleClick (row) {
      this.dialogVisible = true
      const res = await detail({ id: row.id })
      this.newTable = this.tabledata.find(item => item.id === row.id)
      this.dialogItemObj = res.data
    },
    // 预览弹层
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
        })
        .catch(_ => {})
    },
    // 开启审核弹层
    closeSh (id) {
      this.ShdialogVisible = true
      this.ShId = id
    },
    // 审核弹框提交按钮
    submit () {
      if (!this.textarea) return this.$message.warning('请输入审核建议')
      this.getchoiceCheck({ chkRemarks: this.textarea, chkState: this.value, id: this.ShId })
      this.$emit('updateValueSubmit')
      this.$emit('updateValueSubmit')
      this.ShdialogVisible = false
    },
    async  getchoiceCheck (data) {
      await choiceCheck(data)
    },
    // 审核弹层
    handleClose1 (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.ShdialogVisible = false
        })
        .catch(_ => {})
    },

    // 上下架 弹出框
    open (publishState, id) {
      this.$confirm(publishState === 1 ? '您确认上架这道题目吗?' : '您确认下架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.tabledata.find(item => item.id === id).publishState = publishState
        this.newTableData = this.tabledata.find(item => item.id === id)
        this.getchoicePublish(this.newTableData)
        if (this.newTableData.publishState === 1) {
          this.$message.success('上架成功')
        } else {
          this.$message.success('下架成功')
        }
      }).catch((cancel) => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 上架下架请求
    async getchoicePublish (data) {
      await choicePublish(data)
    },
    // 删除功能
    removeDelOpen (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.newTableData = this.tabledata.find(item => item.id === id)
        await remove(this.newTableData)
        this.$message.success('删除成功')
        // 通知父组件更新
        this.$emit('updateValueSubmit')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 去除字段中的html标签
    clearHTMLTag (str) {
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    // 处理时间
    fromTime (timer) {
      const jsonDate = new Date(timer).toJSON()
      // 东八区需要加八小时
      const Datatimer = new Date(jsonDate).getTime() + 8 * 3600 * 1000
      return new Date(Datatimer)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    }
  }

}

</script>

<style scoped lang="scss">
::v-deep .cell{
  display: flex;
  justify-content: space-between;
}
.row-bg{
  margin-bottom: 20px;
}
::v-deep .el-dialog__footer{
  text-align: right ;
}
</style>
